<template>
    <div>
        <el-table :data="tableData" style="width: 100% ;">
            <el-table-column prop="name" label="权限名称" width="250px">
            </el-table-column>
            <el-table-column prop="description" label="权限描述" width="180px">
            </el-table-column>
            <el-table-column prop="path" label="权限路径" width="180px">
            </el-table-column>
            <el-table-column prop="icon" label="权限图标" width="180px">
            </el-table-column>
            <el-table-column label="操作" min-width="150">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)" circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)" circle></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :page-size="config.pageSize" :pager-count="5" layout="prev, pager, next"
            :current-page="config.page" @current-change="changePage" :total="config.total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: 'PremissionsTable',
    props: {
        config: Object,
        tableData: Array
    },
    methods: {
        handleEdit(row) {
            this.$emit('edit', row)
        },
        handleDelete(row) {
            this.$emit('del', row)
        },
        changePage(page) {
            this.config.page = page
            this.$emit('changePage', page)
        },
    }
}
</script>